<style scoped>

.Ycontainer{
    background-image: url('../../asset/img/new_login_bgc.png');
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* position: fixed; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
}
.Ycontent{
    width: 75%;
    margin: 0 auto;
    height: 100%;
}
.Ycontent .headerBox .Yleft,.Ycontent .headerBox .Yright{
    
}
.Ycontent .headerBox .Yleft {
    padding:40px 0 40px 8%;
    line-height: 55px; 
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}

.Ycontent .headerBox .Yleft .logoBox,.Ycontent .headerBox .Yleft .wenzi{
   display: inline-block;
   height: 55px ;
   line-height: 55px;
   vertical-align: middle;
}
.Ycontent .headerBox .Yleft .wenzi{
   font-size: 18px;
   font-weight: 600;
   color: #FFF;
   /* letter-spacing: 1px; */
}
.Ycontent .headerBox .Yleft .wenzi span{
    font-size: 25px;
    font-weight: bold;
    padding: 0 10px;
}
.Ycontent .headerBox .Yright{
    width: 50%;
    display: inline-block;
    padding: 40px 0 40px 8%;
    vertical-align: middle;
}

.Ycontent .headerBox .Yright .phone,.Ycontent .headerBox .Yright .web{
    margin-left: 40%;
    line-height: 27px;
    height: 27px;
    color: #FFF;
}
@media (max-width: 1000px) {
    .Ycontent .headerBox .Yright .phone,.Ycontent .headerBox .Yright .web {
        margin-left: 20%;
    }
}
.Ycontent .headerBox .Yright .phone span:before{
    content: url('../../asset/img/phone.png');
    line-height: 27px;
    vertical-align: sub;
}
.Ycontent .headerBox .Yright .web span:before{
    content: url('../../asset/img/world.png');
    line-height: 27px;
    vertical-align: sub;
    
}
.Ycontent .main{
    background-color: #fff;
    border-radius: 50px;
    padding: 2% 5%;
    min-width: 900px;

}
.Ycontent .main .Mleft{
    display: inline-block;
    /* border: 1px solid black; */
    /* height: 600px; */
    vertical-align: middle;
    padding: 3%;
    padding-right: 2%;
    /* min-width: 560px; */
}
@media (max-width: 800px) {
    .Ycontent .main .Mleft {
        display:none;
    }
}
.Ycontent .main .Mleft img{
    width: 100%;
    /* height: 100%; */
}
.Ycontent .main .Mright{
    min-width: 370px;
    width:40%;
    display: inline-block;
    /* border: 1px solid red; */
    /* height: 500px; */
    vertical-align: middle;
    /* padding-top: 6%; */
}
@media (max-width: 800px) {

    .Ycontent .main .Mright{
        width: 100%;
        padding-top: 6%;
    }
}
.Ycontent .main .Mright .Rtitle,.Ycontent .main .Mright .form{
    max-width: 370px;
    margin: 0 auto;
}
.Ycontent .main .Mright .Rtitle{
    margin-bottom: 30px;
}
.Ycontent .main .Mright .Rtitle span{
    color: #3880FF;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
}
.Ycontent .main .Mright .Rtitle span:before{
    content: url('../../asset/img/quan.png');
    display: inline-block;
    line-height: 25px;
    vertical-align: middle;
    margin-right: 15px;
    letter-spacing: 2px;
}
.Ycontent .main .Mright .form {
    /* padding-left: 46px; */
}
.Ycontent .main .Mright .form .div{
    border-bottom: 1px solid #C4C4C4;
    /* padding-bottom: 5px; */
    padding-top: 30px;
}
.Ycontent .main .Mright .form .div:first-child:before{
    content: url('../../asset/img/world(3).png');
    vertical-align: middle;
}
.Ycontent .main .Mright .form .div:nth-child(2):before{
    content: url('../../asset/img/world(4).png');
    vertical-align: middle;
}
.Ycontent .main .Mright .form .div input{
    border: none;
    outline: none;
    vertical-align: text-bottom;
    background-color: #FFF;
    max-width: 280px;
    padding-left: 10px;
    color: #797979;
    height: 21px;
    line-height: 21px;
}
.Ycontent .main .Mright .form .div input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.Ycontent .main .Mright .form .opera span{
    padding: 30px 0;
    display: inline-block;
    vertical-align: middle;
}
.Ycontent .main .Mright .form .opera span input{
    vertical-align: middle;
    margin-right: 5px;
    
}
.Ycontent .main .Mright .form .opera span.forget{
    float: right;
    color: #3880FF;
    cursor: pointer;
}
.Ycontent .main .Mright .form .opera span.forget:hover{
}
.Ycontent .main .Mright .form .submit div{
  background: -webkit-linear-gradient(left, #35B6FE , #488AFF); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #35B6FE, #488AFF); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #35B6FE, #488AFF); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #35B6FE , #488AFF); /* 标准的语法 */
    height: 35px;
    line-height: 35px;
    color: #FFF;
    border-radius: 20px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.Ycontent .main .Mright .form .chrome{
    padding:25px 0 ;
    text-align: center;
}
@media (max-width:1200px){
    .Ycontent{
        width: 80%;
    }
}
@media (max-width: 800px) {
    .Ycontent .headerBox .Yleft {
        width: 100%;
        padding-top:20px ;
        padding-bottom:0 ;
    }
    .Ycontent .headerBox .Yright{
        width: 100%;
        padding: 0;
        text-align: left;
    }
    .Ycontent .headerBox .Yright .phone,.Ycontent .headerBox .Yright .web {
        margin-left: 8%;
    }
}

</style>
<template>
  <div class="Ycontainer" v-on:keydown.13="handleSubmit('formItem')">
      <div class="Ycontent">
          <div class="headerBox">
              <div class="Yleft">
                  <div class="logoBox">
                    <img src="../../asset/img/new_logo.png" alt="">
                  </div>
                  <div class="wenzi">
                      <span>|</span>保险销售商核心业务管理系统
                  </div>
              </div><div class="Yright">
                  <div class="phone">
                      <span>
                        支持电话：4000-277-252
                      </span>
                  </div>
                  <div class="web">
                      <span>
                        网址：www.kuaibao365.com
                      </span>
                  </div>
              </div>
          </div>
          <div class="main">
              <div class="Mleft">
                  <img src="../../asset/img/left_img.png" alt="">
              </div><div class="Mright">
                <div class="Rtitle">
                    <span>为保险销售商提供专业信息化管理平台</span>
                </div>
                <div class="form"> 
                    <Form ref="formItem" :model="formInline" :rules="ruleInline" class="form_box">
                        <Form-item prop="user" class="form-group mb10">
                            <div class="div">
                                <input type="text" name="zh" placeholder="用户名称" v-model="formInline.userName">
                            </div>
                        </Form-item>
                        <Form-item prop="password" class="form-group nomargin">
                            <div class="div">
                                <input type="password" name="pwd" placeholder="密码" v-model="formInline.password">
                            </div>
                        </Form-item>
                        <div class="opera">
                            <span><input type="checkbox" id="omg" v-model="next"><label for="omg">下次自动登录</label></span>
                            <span class="forget" disabled>忘记密码？</span>
                        </div>
                        <div class="submit" @click="handleSubmit('formItem')">
                            <div >登&nbsp;陆</div>
                        </div>
                        <div class="chrome">
                            建议使用<a href="https://www.kuaibao365.com/chrome.exe" style="font-wieght:bold">chrome浏览器</a>
                        </div>
                    </Form>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import { login , getLoginLogo } from '../../api/login'
import crypto from 'crypto';
export default {
  data(){
      return {
          next:false,
          formInline: {
                userName: '',
                password: '',
                user_type:1,
            },
            ruleInline: {
                userName: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 8, message: '密码长度不能小于8位', trigger: 'blur' }
                ]
            }
      }
  },
  created(){
      if(localStorage.getItem('userName')){
          let _params = {
                'userName': this.aesDecrypt(localStorage.getItem('userName'),'userName'),
                'password': this.aesDecrypt(localStorage.getItem('password'),'password'),
            }
            new Promise((resolve, reject) => {
                login(_params).then(response => {
                    if (response.data.err == 0) {
                        this.$Message.success('登录成功!');
                        let _value = {
                            'id': response.data.data.id,
                            'name': response.data.data.name,
                            'avatar': response.data.data.logo,
                            'role_id': response.data.data.role_id,
                            // 'token': response.data.data.token
                        }
                        this.$store.dispatch('setUser', _value);                       
                        sessionStorage.setItem('token', response.data.data.token);
                        sessionStorage.setItem('id', response.data.data.id);
                        if(this.next){
                            localStorage.setItem('userName',this.aesEncrypt(this.formInline.userName,'userName'));
                            localStorage.setItem('password',this.aesEncrypt(this.formInline.password,'password'));
                            // localStorage.setItem('token',response.data.data.token);
                            // localStorage.setItem('id',this.response.data.data.id);
                        }else{
                            localStorage.removeItem('userName');
                            localStorage.removeItem('password');
                        }
                        sessionStorage.setItem('cname', this.name);
                        sessionStorage.setItem('cid', this.cid);
                       location.reload();
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
      }
      
  },
  methods:{
      handleSubmit(name) {
        //   localStorage.setItem('userName',this.formInline.userName);
        //   localStorage.setItem('password',this.formInline.password);
        //   alert(localStorage.getItem('userName'));
            this.$refs[name].validate((valid) => {
                if (valid) {
                    
                        this.loginIn();
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        loginIn() {
            let _params = {
                'userName': this.formInline.userName,
                'password': this.formInline.password,
            }
            new Promise((resolve, reject) => {
                login(_params).then(response => {
                    if (response.data.err == 0) {
                        this.$Message.success('登录成功!');
                        let _value = {
                            'id': response.data.data.id,
                            'name': response.data.data.name,
                            'avatar': response.data.data.logo,
                            'role_id': response.data.data.role_id,
                            // 'token': response.data.data.token
                        }
                        this.$store.dispatch('setUser', _value);                       
                        sessionStorage.setItem('token', response.data.data.token);
                        sessionStorage.setItem('id', response.data.data.id);
                        if(this.next){
                            localStorage.setItem('userName',this.aesEncrypt(this.formInline.userName,'userName'));
                            localStorage.setItem('password',this.aesEncrypt(this.formInline.password,'password'));
                        }else{
                            localStorage.removeItem('userName');
                            localStorage.removeItem('password');
                        }
                        sessionStorage.setItem('cname', this.name);
                        sessionStorage.setItem('cid', this.cid);
                       location.reload();
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //对储存的账号密码进行加密
        //加
        aesEncrypt(data, key) {
            const cipher = crypto.createCipher('aes192', key);
            var crypted = cipher.update(data, 'utf8', 'hex');
            crypted += cipher.final('hex');
            return crypted;
        },
        //解
        aesDecrypt(encrypted, key) {
            const decipher = crypto.createDecipher('aes192', key);
            var decrypted = decipher.update(encrypted, 'hex', 'utf8');
            decrypted += decipher.final('utf8');
            return decrypted;
        }

  },
  mounted(){
    // window.onresize = function temp() {
    //     console.log(parseFloat(getComputedStyle(document.getElementsByClassName('main')[0]).paddingRight));
        let right=Math.ceil(parseFloat(getComputedStyle(document.getElementsByClassName('main')[0]).paddingRight));
    //     console.log(parseFloat(getComputedStyle(document.getElementsByClassName('main')[0]).paddingLeft));
        let left = Math.ceil(parseFloat(getComputedStyle(document.getElementsByClassName('main')[0]).paddingLeft));
    //     console.log(parseInt(getComputedStyle(document.getElementsByClassName('main')[0]).width)-left-right);
        document.getElementsByClassName('Mleft')[0].style.width = parseInt(getComputedStyle(document.getElementsByClassName('main')[0]).width)-left-right-375+'px';
    //     // console.log(parseInt(getComputedStyle(document.getElementsByClassName('main')[0]).width)-parseInt(getComputedStyle(document.getElementsByClassName('Mright')[0]).width));
    // };
  }
}
</script>